<script setup>
import { GlobeAltIcon, EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/outline'
import { useI18n } from "vue-i18n"
import { useRouter } from "vue-router"
import { reactive } from 'vue';
import { registerApi } from "@/api"
import { showToast } from 'vant';

const { t, locale } = useI18n();
const router = useRouter();

const goTo = (url) => {
    router.push(url)
}
const state = reactive({
    type1: 'password',
    type2: 'password',
    type3: 'password',
    username: "",
    tel: "",
    password: "",
    security: "",
    code: "",
    loading: false
})

const open = (type) => {
    if (type == 1) {
        state.type1 = state.type1 == 'password' ? 'text' : 'password'
    }
    if (type == 2) {
        state.type2 = state.type2 == 'password' ? 'text' : 'password'
    }
    if (type == 3) {
        state.type3 = state.type3 == 'password' ? 'text' : 'password'
    }

}
const register = () => {
    if (state.username == '') {
        showToast(t('Your username'));
        return
    }
    if (state.tel == '') {
        showToast(t('Your phone numbers'));
        return
    }
    if (state.password == '') {
        showToast(t('Login password'));
        return
    }
    if (state.password != state.cpassword) {
        showToast(t('Inconsistent password'));
        return
    }
    if (state.security == '') {
        showToast(t('Enter fund password'));
        return
    }
    if (state.code == '') {
        showToast(t('Invitation code'));
        return
    }
    registerApi({
        username: state.username,
        tel: state.tel,
        password: state.password,
        security: state.security,
        code: state.code,
    }).then(() => {

        showToast(t('Registration successful'));
        setTimeout(() => {
            goTo('/login')
        }, 800);
    }).catch(err => {
        showToast(err.msg)
    }).finally(() => {
        state.loading = false;
    })
}

</script>

<template>
    <div class="relative">
        <div class="absolute right-0 top-0 py-1.5 px-2" @click="goTo('/language')">
            <GlobeAltIcon class="h-3 w-3 text-black-300" />
        </div>
    </div>

    <div class="p-1.5 m-1.5 flex justify-center flex-col " style="margin-top: 20px;">
        <img src="/images/register_logo.png" class="w-12 place-self-center" />

        <ul class="flex flex-col space-y-1 pt-6">
            <li>
                <!-- <input type="text" name="tel" placeholder="Please enter your username or mobile number" value=""> -->
                <input type="text" class="w-full input input-bordered h-4 text-xs text-center" v-model="state.username"
                    style="font-size: 0.4rem;" :placeholder="$t('Your username')" />
            </li>
            <li>
                <!-- <input type="text" name="tel" placeholder="Please enter your username or mobile number" value=""> -->
                <input type="text" class="w-full input input-bordered h-4 text-xs text-center" v-model="state.tel"
                    style="font-size: 0.4rem;" :placeholder="$t('Your phone numbers')" />
            </li>
            <li>
                <label class="input input-bordered flex items-center gap-2 h-4 pr-0.5">
                    <input :type="state.type1" class="grow text-center" :placeholder="$t('Login password')"
                        v-model="state.password" style="font-size: 0.4rem;" />
                    <EyeSlashIcon class="h-3 w-3 text-gray-400" v-if="state.type1 == 'password'" @click="open(1)" />
                    <EyeIcon class="h-3 w-3 text-gray-400" v-if="state.type1 == 'text'" @click="open(1)" />
                </label>
            </li>
            <li>
                <label class="input input-bordered flex items-center gap-2 h-4 pr-0.5">
                    <input :type="state.type2" class="grow text-center" :placeholder="$t('Confirm Password')"
                        v-model="state.cpassword" style="font-size: 0.4rem;" />
                    <EyeSlashIcon class="h-3 w-3 text-gray-400" v-if="state.type2 == 'password'" @click="open(2)" />
                    <EyeIcon class="h-3 w-3 text-gray-400" v-if="state.type2 == 'text'" @click="open(2)" />
                </label>
            </li>
            <li>
                <label class="input input-bordered flex items-center gap-2 h-4 pr-0.5">
                    <input :type="state.type3" class="grow text-center" :placeholder="$t('Enter fund password')"
                        v-model="state.security" style="font-size: 0.4rem;" />
                    <EyeSlashIcon class="h-3 w-3 text-gray-400" v-if="state.type3 == 'password'" @click="open(3)" />
                    <EyeIcon class="h-3 w-3 text-gray-400" v-if="state.type3 == 'text'" @click="open(3)" />
                </label>
            </li>
            <!-- <li>
                <label class="input input-bordered flex items-center gap-2 h-4 pr-0.5">
                    <input type="text" class="grow text-center" :placeholder="$t('Enter verify code')"
                        style="font-size: 0.4rem;" />
                    <span class="leading-1"><img class="h-3"
                            src="" /></span>
                </label>
            </li> -->
            <li>
                <!-- <input type="text" name="tel" placeholder="Please enter your username or mobile number" value=""> -->
                <input type="text" class="w-full input input-bordered h-4 text-xs text-center" v-model="state.code"
                    style="font-size: 0.4rem;" :placeholder="$t('Invitation code')" />
            </li>
        </ul>
        <div class="pt-4" @click="register">
            <button class="btn btn-primary btn-xs w-full " style="font-size: 0.4rem;" :disabled="state.loading">{{
            $t('Sign Up') }}</button>
        </div>
        <div class="pt-4" @click="goTo('/login')">
            <button class="btn btn-primary btn-xs w-full" style="font-size: 0.4rem;">{{ $t('Log In') }}</button>
        </div>
    </div>

</template>
